<template>
  <div class="photo-cell-container">
    <div>
      <img v-lazy="photoItem.minPic" @click="imageClick(photoItem.maxPic)">
    </div>
    <div>
      <p>{{ '时间：' + photoItem.createTime }}</p>
      <p v-bind:class="getStatus ? 'was_ordered' : 'is_ordering'">{{ '状态：' + getStatusTitle }}</p>
      <p>{{ '单号：' + photoItem.orderId }}</p>
    </div>
    <div class="big-img-div" v-if="isShowBigImg" ref="bigImageDiv" @touchmove.prevent @click="imageClick(photoItem.maxPic)">
      <img v-lazy="photoItem.maxPic">
    </div>
  </div>
</template>

<script>
  export default {
    name: 'photo_cell',
    props: {
      photoItem: {
        type: Object,
        default: {}
      }
    },
    data () {
      return {
        isShowBigImg: false,
        showBigImgUrl: '',
      }
    },
    computed: {
      getStatusTitle () {
        if (this.$props.photoItem.status) {
          return '已配单'
        } else {
          return '配单中'
        }
      },
      getStatus () {
        return this.$props.photoItem.status === 0
      }
    },
    methods: {
      imageClick (imgUrl) {
        this.isShowBigImg = !this.isShowBigImg
        this.showBigImgUrl = imgUrl
      }
    },
    create () {

    },
    activated () {
      this.$indicator.close()
    }
  }
</script>

<style scoped lang="scss">
  div.photo-cell-container {
    width: 100%;
    height: 100px;
    box-sizing: border-box;
    background-color: rgb(233, 233, 233);

    >div {
      position: relative;
      float: left;
      width: auto;
      height: 100px;

      >img {
        border: 0.5px solid rgb(233, 233, 233);
        padding: 5px;
        /*max-width: 70px;*/
        width: 70px;
        height: 80px;
        background-color: white;
      }

      >p {
        margin-top: 5px;
        text-align: left;
        font-size: 14px;
        height: 26px;
        line-height: 26px;
      }

      >p.is_ordering {
        color:  rgb(27, 162, 232);
      }

      >p.was_ordered {
        color:  #c51a2b;
      }
    }

    >div:first-child {
      padding: 10px;
      background-color: transparent;
    }

    >div.big-img-div {
      top: 0;
      left: 0;
      background-color: rgba(0, 0, 0, 0.5);
      width: 100%;
      height: 100%;
      z-index: 66;
      position: fixed;

      >img {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border: 0 solid rgb(233, 233, 233);
        padding: 0;
        background-color: white;
        max-width: 100%;
        max-height: 100%;
        height: auto;
        width: auto;
      }
    }
  }
</style>
